<template>
  <div class="member-list">
    <!-- 信息填写不完整，商户将无法提交审核，是否确认保存 -->
    <a-form class="search-form">
      <a-row :gutter="24">
        <a-col :lg="12" :xl="9" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 35%" v-model="searchStatus">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">会员ID</a-select-option>
                <a-select-option value="2">会员账号</a-select-option>
                <a-select-option value="3">会员手机号</a-select-option>
                <!-- 搜索类型  0 全部 1 id 2 账号 3 手机号 -->
              </a-select>
              <a-input style="width: 65%" placeholder="请输入查询条件" v-model="keywords"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="8">
          <a-form-item label="入驻时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              class="select-range-time"
              @change="getCreateTime"
              v-model="createTime"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="5" :xxl="6" class="top-btns">
          <a-button type="primary" html-type="submit" @click="searchListData">查询</a-button>
          <a-button @click="resetList">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="memberListData"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
      >
        <span slot="is_commission" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :checked="value"
            @click="confirmHint(item, 'is_commission')"
          />
        </span>
        <span slot="is_enable" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :checked="value"
            @click="confirmHint(item, 'is_enable')"
          />
        </span>
        <span slot="action" slot-scope class="action-wrap">
          <a>查看详情</a>
          <a>钱包</a>
          <a>优惠券</a>
        </span>
      </a-table>
      <pagination
        :total="total"
        @loadDataList="pageInit"
        ref="pageBand"
      />
    </div>
    <div class="modal-wrap">
      <confirm-modal
        :hint="hint"
        @handleConfirm="handleConfirmOk"
        ref="openModal"
      />
    </div>
  </div>
</template>
<script>
import { memberList, memberUpdate } from '../../store/memberApi.js'
export default {
  data() {
    return {
      editingItem: {
        is_commission: false,
        is_enable: false
      },
      hint: '',
      visibleCommission: false,
      visibleEnable: false,
      total: 0,
      start_time: 0,
      end_time: 0,
      keywords: '',
      pagination: false,
      loading: false,
      searchStatus: '0',
      createTime: [],
      columns: [
        {
          dataIndex: 'index',
          title: '序号'
        },
        {
          title: '会员ID',
          dataIndex: 'id'
        },
        {
          title: '会员账号',
          dataIndex: 'account'
        },
        {
          title: '会员手机号',
          dataIndex: 'phone'
        },
        {
          title: '是否认证',
          dataIndex: 'is_verify',
          customRender(is_verify) {
            if (is_verify == true) {
              return '是'
            } else if (is_verify == false) {
              return '否'
            }
          }
        },
        {
          title: '等级',
          dataIndex: 'vip_level'
        },
        {
          title: '入驻时间',
          dataIndex: 'created_at'
        },
        {
          title: '分润状态',
          dataIndex: 'is_commission',
          scopedSlots: { customRender: 'is_commission' }
        },
        {
          title: '账号状态',
          dataIndex: 'is_enable',
          scopedSlots: { customRender: 'is_enable' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      memberListData: []
    }
  },
  methods: {
    // 列表和筛选接口
    pageInit(info) {
      this.loading = true
      var data = {
        searchType: this.searchStatus,
        num: info.pageSize,
        page: info.page
      }
      /* eslint-disable */
      if (this.start_time != 0) {
        data.startTime = this.start_time
      }
      if (this.end_time != 0) {
        data.endTime = this.end_time
      }
      if (this.keywords !== '') {
        data.name = this.keywords
      }
      /* eslint-disable */
      memberList(data).then(res => {
        var array = res.data.list
          for (let i = 0; i < array.length; i++) {
            array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
          }
        this.memberListData = array
        this.total = res.data.total_num
        this.loading = false
      })
    },
    // 按条件查询
    searchListData() {
      this.$refs.pageBand.getData()
    },
    // 重置
    resetList() {
      this.searchStatus = '0'
      this.createTime = []
      this.start_time = 0
      this.end_time = 0
      this.defaultSearch = '0'
      this.keywords = ''
      this.$refs.pageBand.getData()
    },
    // 获取时间戳
    getCreateTime(date, str) {
      if (str[0] && str[1]) {
        this.start_time = new Date(str[0] + ' 00:00:00').getTime() / 1000
        this.end_time = new Date(str[1] + ' 23:59:59').getTime() / 1000
      } else {
        this.start_time = 0
        this.end_time = 0
      }
    },
    // 开关操作
    confirmHint (item, type) {
      if (type === 'is_commission') {
        if (item.is_commission) {
          this.hint = 2
        } else {
          this.hint = 1
        }
      } else if (type === 'is_enable') {
        if (item.is_enable) {
          this.hint = 4
        } else {
          this.hint = 3
        }
      }
      this.editingItem = item
      this.$refs.openModal.openModal()
    },
    handleConfirmOk () {
      let status = (this.hint ===2 || this.hint === 4) ? 0 : 1
      let type = (this.hint ===1 || this.hint === 2) ? 1 : 2
      memberUpdate({
        type,
        status,
        id: this.editingItem.uuid
      }).then(res => {
        this.$refs.pageBand.getEvent() // 重新加载列表
        this.$message.success(res.data.message)
      })
    }
  }
}
</script>
<style>
</style>
